import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Modal, Form, Input, Button, Select, message } from 'antd';

import api from '../../utils/api';

const { Option } = Select;

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {},
    dispatch,
  ),
});

export const DeviceFrom = Form.create()(
  connect(mapStateToProps, mapDispatchToProps)(class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        typeValue: null
      };
      this.formLayout = {
        labelCol: { span: 7 },
        wrapperCol: { span: 13 },
      };
    }

    typeSecect = (key) => {
      this.setState({
        typeValue: key
      });
    }

    onClose = () => {
      const { form, modalHanle } = this.props;
      form.resetFields();
      modalHanle();
    }

    onSave = () => {
      const { form, onSearchData, isUpdate, currentItem } = this.props;
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (isUpdate) {
          api({
            method: 'POST',
            url: '/tenant/deviceUpdate',
            data: {
              id: currentItem.id,
              values
            }
          }).then(res => {
            const { success } = res.data;
            if (success) {
              message.success('修改成功');
              onSearchData();
              this.onClose();
              return;
            }
          }).catch(res => {
            message.error(res.data.message || '修改失败');
          });
          return;
        }
        api({
          method: 'POST',
          url: '/tenant/deviceAdd',
          data: {
            values
          }
        }).then(res => {
          const { success } = res.data;
          if (success) {
            message.success('添加成功');
            onSearchData();
            this.onClose();
          }
        }).catch(res => {
          message.error(res.data.message || '添加失败');
        });
      });
    }

      render() {
        const { typeValue } = this.state;
        const { showAddModal, form, tenantList, isUpdate, currentItem } = this.props;
        const { getFieldDecorator } = form;
        const FormItem = Form.Item;
        return (
          <div>
            <Modal
              maskClosable={false}
              width={620}
              visible={showAddModal}
              title={isUpdate ? "修改设备" : "新增设备"}
              onCancel={this.onClose}
              footer={[
                <Button key="back" onClick={this.onClose}>取消</Button>,
                <Button key="submit" type="primary" onClick={this.onSave}>提交</Button>
              ]}
            >
              <Form>
                <FormItem label="设备Guid" {...this.formLayout}>
                  {getFieldDecorator('deviceGuid', {
                    rules: [{ required: true, message: '请输入设备Guid' }],
                    initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入设备Guid" />
                  )}
                </FormItem>
                <FormItem label="租户" {...this.formLayout}>
                  {getFieldDecorator('tenantId', {
                    rules: [{ required: true, message: '请选择租户' }],
                    initialValue: currentItem.tenantId,
                  })(
                    <Select placeholder="请选择租户">
                      {tenantList.map(item => (
                        <Option key={item.id} value={item.id}>{item.name}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
                <FormItem label="设备名称" {...this.formLayout}>
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入设备名称' }],
                    initialValue: currentItem.name,
                  })(
                    <Input placeholder="请输入设备名称" />
                  )}
                </FormItem>
                <FormItem label="设备SN" {...this.formLayout}>
                  {getFieldDecorator('SN', {
                    rules: [{ required: true, message: '请输入设备SN' }],
                    initialValue: currentItem.SN,
                  })(
                    <Input placeholder="请输入设备SN" />
                  )}
                </FormItem>
                <FormItem label="设备类别" {...this.formLayout}>
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: '请选择设备类别' }],
                    initialValue: currentItem.type,
                  })(
                    <Select placeholder="请选择设备类别" onChange={this.typeSecect}>
                      <Option value="DTU">DTU</Option>
                      <Option value="CAMERA">CAMERA</Option>
                    </Select>
                  )}
                </FormItem>
                {typeValue === "CAMERA" ?
                  <FormItem label="视频地址" {...this.formLayout}>
                    {getFieldDecorator('liveUrls', {
                      rules: [{ required: true, message: '请输入视频地址' }],
                      initialValue: currentItem.liveUrls,
                    })(
                      <Input placeholder="请输入视频地址" />
                    )}
                  </FormItem> : null
                }
              </Form>
            </Modal>
          </div>
        );
      }
  })
);
